<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二手绘本详情</title>
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <!-- 引入通用头部 -->
    <div id="commonHeader"></div>
    
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div class="container">
            <div class="crumbs">
                <a href="home.html">首页</a> > <span id="categoryName">绘本详情</span> > <span id="bookTitle">图书详情</span>
            </div>

            <div class="product-detail">
                <div class="product-gallery">
                    <div class="main-image">
                        <img src="./img/tupian18.jpg" alt="绘本封面" id="mainImg">
                    </div>
                    <div class="thumbnail-list" id="thumbnailList">
                        <!-- 缩略图将通过JS动态添加 -->
                </div>
            </div>

            <div class="product-info">
                <h1 class="book-title" id="bookName">加载中...</h1>
                <p class="book-desc" id="bookDesc">加载中...</p>
                
                <div class="price-box">
                    <span class="price-label">价格：</span>
                    <span class="price" id="price">¥0.00</span>
                    <span class="original-price" id="originalPrice">¥0.00</span>
                </div>

                <div class="book-meta">
                    <div class="meta-item">
                        <span class="meta-label">主题：</span>
                        <span id="category">加载中...</span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">出版地区：</span>
                        <span id="region">加载中...</span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">表现形式：</span>
                        <span id="format">加载中...</span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">适读年龄：</span>
                        <span id="age">加载中...</span>
                    </div>
                    <div class="meta-item">
                        <span class="meta-label">作者：</span>
                        <span id="author">加载中...</span>
                    </div>
                </div>

                <div class="quality-box">
                    <h3 class="quality-title">品相说明</h3>
                    <ul class="quality-list">
                        <li>品相：<span id="condition">加载中...</span></li>
                        <li>外观：<span id="appearance">加载中...</span></li>
                        <li>内页：<span id="innerPages">加载中...</span></li>
                        <li>消毒：已进行专业消毒处理，安全放心</li>
                    </ul>
                </div>
                
                <div class="action-box">
                    <div class="quantity-box">
                        <span class="quantity-label">数量：</span>
                        <div class="quantity-control">
                            <button class="quantity-btn minus" id="minusBtn">-</button>
                            <input type="text" class="quantity-input" id="quantity" value="1">
                            <button class="quantity-btn plus" id="plusBtn">+</button>
                        </div>
                        <span class="stock" id="stock">库存：0</span>
                    </div>
                    <div class="button-group">
                        <button class="action-btn add-cart" id="addToCartBtn">加入购物车</button>
                        <button class="action-btn buy-now" id="buyNowBtn">立即购买</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="detail-content">
            <div class="detail-tabs">
                <span class="tab active" data-tab="detail">商品详情</span>
                <span class="tab" data-tab="params">规格参数</span>
            </div>

            <div class="detail-section" id="detailSection">
                <h3 class="section-title">内容简介</h3>
                <p id="description" style="font-size: 14px; line-height: 1.8; color: #666;">
                    加载中...
                </p>
            </div>

            <div class="detail-section" id="paramsSection" style="display: none;">
                <h3 class="section-title">商品参数</h3>
                <table class="book-params">
                    <tr>
                        <td>绘本风格</td>
                        <td id="style">加载中...</td>
                    </tr>
                    <tr>
                        <td>故事篇幅</td>
                        <td id="length">加载中...</td>
                    </tr>
                    <tr>
                        <td>装帧形式</td>
                        <td id="binding">加载中...</td>
                    </tr>
                    <tr>
                        <td>新旧程度</td>
                        <td id="degreeDetail">加载中...</td>
                    </tr>
                    <tr>
                        <td>出版社</td>
                        <td id="publisher">加载中...</td>
                    </tr>
                </table>
            </div>

            <div class="detail-section">
                <h3 class="section-title">精美插图预览</h3>
                <div id="previewImages" style="text-align: center;">
                    <!-- 预览图将通过JS动态添加 -->
                </div>
            </div>
        </div>
    </div>
    <!-- 登录提示弹窗 -->
    <div id="mask" class="mask" style="display: none;">
        <div class="loginContent">
            <div class="loginTitle">
                <span>请先登录</span>
                <span id="closeMask" class="close">×</span>
            </div>
            <div class="loginBtn">
                <button id="loginBtn">去登录</button>
            </div>
        </div>
    </div>
</body>
<script src="./layui/layui.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/api.js"></script>
<script src="./js/auth.js"></script>
<script src="./js/header.js"></script>
<script src="./js/detail.js" defer></script>
</html>